<template>
  <div>
    <a-spin v-if="initLoading" :spinning="initLoading"> </a-spin>
    <a-cascader
      v-show="!initLoading"
      :disabled="disabled"
      v-model="data"
      :options="options"
      :placeholder="record.options.placeholder"
      @change="onChange"
      @focus="focus"
      :show-search="{ filter }"
    >
      <div slot="notFoundContent" style="text-align: center">
        <a-spin v-if="loading" :spinning="loading"></a-spin>
        <eip-empty v-else></eip-empty>
      </div>
    </a-cascader>
  </div>
</template>
<script>
export default {
  props: ["value", "record", "disabled"],
  data() {
    return {
      initLoading: false, //初始化是否加载效果
      options: [],
      data: [],
      loading: false,
    };
  },
  watch: {
    value(value) {
      if (value) {
        this.data = value;
        this.focus();
      }
    },
    "record.options.options": function (value) {
      this.options = value;
    },
  },
  created() {},
  methods: {
    filter(inputValue, path) {
      return path.some(
        (option) =>
          option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
      );
    },
    /**
     * 得到焦点
     */
    focus() {
      let that = this;
      if (this.options.length == 0) {
        this.initLoading = true;
        that.loading = true;
        that.options = [];
        let jsonPath = "/data/county.json";
        switch (that.record.options.levelType) {
          case 1:
            jsonPath = "/data/province.json";
            break;
          case 2:
            jsonPath = "/data/city.json";
            break;
          case 3:
            jsonPath = "/data/county.json";
            break;
          case 4:
            jsonPath = "/data/town.json";
            break;
          default:
            jsonPath = "/data/all.json";
            break;
        }
        fetch(jsonPath).then((data) => {
          data.json().then((treeData) => {
            var dynamicData = that.setChildrenTreeData(
              that.$utils.toArrayTree(treeData, {
                key: "value",
              })
            );
            that.options = dynamicData;
            that.record.options.options = that.options;
            that.loading = false;
            that.initLoading = false;
          });
        });
      }
    },
    onChange(value) {
      this.$emit("change", this.data);
    },
    /**
     * 删除children为空
     * @param {*} data
     */
    setChildrenTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children) {
          if (data[i].children.length < 1) {
            delete data[i].children;
          } else {
            this.setChildrenTreeData(data[i].children);
          }
        }
      }
      return data;
    },
  },
};
</script>
<style lang="less" scoped>
.eip-user-picker {
  cursor: pointer;
}

.eip-user-picker .eip-user-picker-arrow {
  font-size: 12px;
}

.eip-text-placeholder {
  color: #bfbfbf;
}

.eip-user-picker:hover
  .eip-user-picker-arrow
  .anticon-close-circle
  + .anticon-down,
.eip-user-picker:not(:hover) .eip-user-picker-arrow .anticon-close-circle {
  display: none;
}

.eip-user-picker-popper {
  width: 100%;
  max-width: 90vw;
  padding: 0;
}

.eip-user-picker-popper .ant-tabs-tab {
  padding: 10px 0 !important;
  margin: 0 12px !important;
}

.eip-user-picker-popper .ant-card-body {
  padding: 0;
}

.anticon-close-circle:hover {
  color: rgba(0, 0, 0, 0.45);
}
</style>
